<template>
  <view class="top-container setting-popup">
    <button @click="emitClose" class="close-btn">关闭</button>
    <view class="title">排行榜</view>
    <view class="rank-list">
      <view 
        v-for="(item, idx) in rankList" 
        :key="idx" 
        class="rank-item"
        :class="{
          'first-place': idx === 0,
          'second-place': idx === 1,
          'third-place': idx === 2
        }"
      >
        <view class="rank-index">
          <template v-if="idx < 3">
            <image :src="getMedalSrc(idx)" class="medal" mode="widthFix" />
          </template>
          <template v-else>{{ idx + 1 }}</template>
        </view>
        <view class="rank-avatar">
          <image :src="item.avatar || '/static/default-avatar.png'" mode="widthFix" />
        </view>
        <view class="rank-name">{{ item.name }}</view>
        <view class="rank-level">通关数：{{ item.level }}</view>
      </view>
    </view>
    <view v-if="rankList.length === 0" class="empty-state">
      暂无排行榜数据
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
const emit = defineEmits(['close'])
const emitClose = () => emit('close')

// 获取奖牌图片路径
const getMedalSrc = (index) => {
  const medals = [
    '/static/gold-medal.png',  // 金牌
    '/static/silver-medal.png',// 银牌
    '/static/bronze-medal.png' // 铜牌
  ]
  return medals[index]
}

const rankList = ref([
  { name: '玩家A', level: 30, avatar: '/static/avatar1.png' },
  { name: '玩家B', level: 28, avatar: '/static/avatar2.png' },
  { name: '玩家C', level: 25, avatar: '/static/avatar3.png' },
  { name: '玩家D', level: 22, avatar: '/static/avatar4.png' },
  { name: '玩家E', level: 20, avatar: '/static/avatar5.png' }
])
</script>

<style scoped>
.top-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 0;
}
.setting-popup {
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.18);
  padding: 40rpx 30rpx;
  min-width: 600rpx;
  min-height: 400rpx;
  position: relative;
  z-index: 1002;
  opacity: 1;
}
.close-btn {
  position: absolute;
  right: 20rpx;
  top: 20rpx;
  z-index: 10;
  background: #f5f5f5;
  border: none;
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
  font-size: 28rpx;
}
.title {
  font-size: 40rpx;
  margin-bottom: 30rpx;
  font-weight: bold;
  color: #333;
}
.rank-list {
  width: 100%;
}
.rank-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx 10rpx;
  border-bottom: 1rpx solid #eee;
  transition: background-color 0.2s;
}
.rank-item:hover {
  background-color: #f9f9f9;
}
.rank-index {
  width: 80rpx;
  font-size: 32rpx;
  text-align: center;
  font-weight: bold;
}
.rank-avatar {
  width: 70rpx;
  height: 70rpx;
  margin-right: 20rpx;
  border-radius: 50%;
  overflow: hidden;
}
.rank-avatar image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rank-name {
  flex: 1;
  font-size: 32rpx;
}
.rank-level {
  width: 200rpx;
  font-size: 32rpx;
  text-align: right;
  color: #666;
}
.medal {
  width: 50rpx;
  height: 50rpx;
}
.first-place .rank-index {
  color: #e6b800;
}
.second-place .rank-index {
  color: #a0a0a0;
}
.third-place .rank-index {
  color: #cd7f32;
}
.empty-state {
  margin-top: 50rpx;
  color: #999;
  font-size: 32rpx;
}
</style>
